<!--商品列表组件-->
<template>
  <div class="goods">
    <goods-list-item
      v-for="item in goodsList"
      :key="item.id"
      :product="item"
      @click="goDetail(item)"
    >
    </goods-list-item>
  </div>
</template>
<script>
import GoodsListItem from "./GoodsListItem.vue";
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";

export default {
  components: {
    GoodsListItem,
  },
  props: {
    goodsList: {
      // <goods-list :goodsList="" />
      type: Array,
      default: () => [],
    },
  },
  setup() {
    const state = reactive({});
    const router = useRouter();
    const goDetail = (item) => {
      console.log("要传递的数据为:" + item + ", " + JSON.stringify(item));
      router.push({
        path: "/detail",
        query: {
          goods: JSON.stringify(item), // 这里要将对象转为json字符串, 因为query只能传字符串
        },
      });
    };
    return {
      ...toRefs(state),
      goDetail,
    };
  },
};
</script>
<style scoped>
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px;
}
</style>
